<template>
  <rt-view>
    <rt-header v-show="!goFromOther && !goFromOther" >
      <rt-navbar :onBack="back">
        <span style="color: #003F5F">活动详情</span>
        <div slot="right"  @click="shareMe" class="more-class">
         ···
        </div>
      </rt-navbar>
    </rt-header>
    <rt-content>
      <div class="main-conetnt" style="min-height: 100%">
        <div class="top-content">
<!--          <img :src="img" @click="show()" />-->
          <img :src="showRemotePic(avatar)" @error="showErrorPic($event)" @click="show()" />
        </div>
        <div class="middle-conetnt">
          <div class="activity-content">
            <div class="title-content">
              {{ form.name }}
            </div>
            <hr size="0.5" color="#F2F6FC" />
            <div class="name-content">
              <div class="sub-title"><span>演讲嘉宾</span><br /></div>
              <div class="name-sty">{{ form.speaker }}</div>
              <div class="show-sty">{{ form.speaker_brief }}</div>
            </div>
            <hr size="0.5" color="#F2F6FC" />
            <div class="time-content">
              <div class="sub-title"><span>活动详情</span><br /></div>
              <div class="sub-conent">
                <div class="img-svg">
                  <img src="../../assets/imgs/time.png" />
                </div>
                <div>
                  {{ form.start_time | moment('YYYY-MM-DD HH:mm') }}至{{
                  form.end_time | moment('YYYY-MM-DD HH:mm')
                  }}
                </div>
              </div>
              <div class="sub-conent" v-if="form.address !== ''&& form.address != null">
                <div class="img-svg">
                  <img src="../../assets/imgs/location.png" />
                </div>
                {{ form.address }}
              </div>
            </div>
          </div>
          <hr size="0.5" color="#F2F6FC" />
          <div class="buttom-content" v-html="form.campaign_brief"></div>

            <div v-transfer-dom>
              <rt-popup v-model="show2" position="bottom">
                <div class="share-open">
                  <div class="share-weixin" @click="shareWx">
                    <div class="img-svg">
                      <img src="../../assets/imgs/weixin.png" />
                    </div>
                    微信
                  </div>
                  <div class="share-friend" @click="shareFd">
                    <div class="img-svg">
                      <img src="../../assets/imgs/friend.png" />
                    </div>
                    朋友圈
                  </div>
                </div>
              </rt-popup>
            </div>
        </div>
      </div>
    </rt-content>
    <rt-footer class="footer" >
      <div style="margin:10px;">
        <rt-button type="sub" size="large" @click="toShowName">报名</rt-button>
      </div>
    </rt-footer>
  </rt-view>
</template>

<script>
export default {
  name: 'CampaignDetail',
  data() {
    return {
      id: '',
      goFromOther: false, //从微信朋友圈等
      goFromSource: '',
      goFormStart: false, //从启动页过来
      showAlert: false,
      form: {
        bbs_campaignid: '',
        start_time: '',
        end_time: '',
        speaker: '',
        speaker_brief: '',
        name: '',
        address: '',
        campaign_brief: '',
        bbs_campaign_link: ''
      },
      avatar: '',
      img: '',
      imgs: [],
      show2: false
    };
  },
  mounted() {
    let result = this.$route.query.goFrom;
    if(result !== '' && result !== undefined){
      this.goFromOther = true;
      if(result === 'wx'){
        this.goFromSource = 'wx';
      }else if(result === 'fd'){
        this.goFromSource = 'fd'
      }
    }
    this.id = this.$route.query.id;
    this.goFormStart = this.$route.query.goFormStart;
    if (this.id != null && this.id !== '') {
      this.getCampaignById(this.id);
    }
  },
  methods: {
    getCampaignById() {
      rt.get(`api/bbs/campaign/getcampaignvo/${this.id}`)
        .then(res => {
          this.avatar = res.avatar;
          this.img = rt.showRemotePic(res.avatar);
          this.imgs.push(this.img);
          this.form = res;
          this.saveOpenLog(res);
        })
    },
    //活动报名
    toShowName() {
      const data = {
        bbs_campaignid: this.form.bbs_campaignid,
        name: this.form.name
      };
      if(!rt.isNullOrWhiteSpace(this.form.bbs_campaign_link)){
        rt.post('/api/bbs/camppaignsignup/signupcampaign', data)
          .then(res => {
            if (res.ErrorCode === 0) {
              rt.openWeb(this.form.bbs_campaign_link);
            }
          }).catch((error) => {
        });
      }else{
        rt.alert('哎呀，活动丢掉啦');
      }
    },
    //保存打开记录
    saveOpenLog(val) {
      const data = {
        object_id: val.bbs_campaignid,
        object_name: val.name
      };
      let type = 'campaign';
      rt.post(`/api/bbs/openedlog/saveopenlog/${type}`, data)
        .then(res => {})
        .catch(error => {
          console.log(error);
        });
    },
    showRemotePic(path){
      console.log(path);
      return rt.showRemotePic(path);
    },
    showErrorPic(e){
      rt.showErrorPic(e);
    },
    //分享
    shareMe() {
      this.show2 = true;
    },
    back() {
      //从启动页来的,返回决策易
      if (this.goFormStart) {
        rt.closeAppPage();
      } else {
        this.$router.back();
      }
    },
    show() {
      let params = {
        urls: this.imgs,
        current: this.imgs[0]
      };
      let options = {
        share: this.share,
        download: this.download
      };
      rt.previewImage(params, options);
    },
    shareWx(){
      var url = window.location.href + '&goFrom=wx';
      var name = this.form.name;
      var remark = '点击进入报名';
      var imgUrl = this.img;
      const data = {
        object_id: this.form.bbs_campaignid,
        object_name: this.form.name,
        share_scene: '1'
      };
      rt.post(`/api/bbs/sharedlog/savesharelog/campaign`, data)
        .then(res => {})
        .catch(error => {
          console.log(error);
        });
      rt.shareData(url,name,remark,imgUrl,"wx");
      this.show2 = false;
    },
    shareFd() {
      var url = window.location.href + '&goFrom=fd';
      var name = this.form.name;
      var remark = '点击进入报名';
      var imgUrl = this.img;
      const data = {
        object_id: this.form.bbs_campaignid,
        object_name: this.form.name,
        share_scene: '2'
      };
      rt.post(`/api/bbs/sharedlog/savesharelog/campaign`, data)
        .then(res => {})
        .catch(error => {
          console.log(error);
        });
      rt
      rt.shareData(url,name,remark,imgUrl,"wx_circle");
      this.show2 = false;
    },
    // 分享回调
    share(url) {
      console.log('share', url);
    },
    // 下载回调
    download(url) {
      console.log('download', url);
    }
  }
};
</script>
<style lang="less" scoped>
.main-conetnt {
  .top-content {
    padding-top: 10px;
    /*height: 220px;*/
    img {
      margin-top: -10px;
      z-index: -1;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .middle-conetnt {
    top: 0;
    position: relative;
    margin-top: -30px;
    min-height: 100%;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 20px 20px 0 0;
    //box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    .activity-content {
      .title-content {
        font-size: 17px;
        font-weight: bold;
        text-align: center;
        padding-bottom: 10px;
      }
      .name-content {
        padding: 10px 0;
        .name-sty {
          font-size: 14px;
          color: #53a4fc;
          display: inline-block;
        }
        .show-sty {
          font-size: 14px;
          display: inline-block;
        }
      }
      .time-content {
        padding: 10px 0;
        .img-svg {
          width: 16px;
          height: 16px;
          float: left;
          margin-right: 5px;
          margin-top: 2px;
        }
        .sub-conent {
          color: #555555;
          font-size: 13px;
        }
      }
      .sub-title {
        font-size: 15px;
        font-weight: bolder;
        padding: 10px 0 10px 0;
      }
    }
  }
  .buttom-content {
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 30px;
    line-height: 2em;
    color: #555555;
    overflow-x: hidden;
    p {
      text-indent: 27pt;
    }
  }
}

.share-open {
  height: 60px;
  padding: 20px 50px;
  display: flex;
  .share-weixin {
    float: left;
    margin-left: 20%;
    width: 50%;
    img {
      margin-left: 3px;
    }
  }
  .share-friend {
    width: 50%;
    img {
      margin-left: 10px;
    }
  }
  .img-svg {
    width: 25px;
    height: 25px;
  }
}
.more-class{
    letter-spacing:3px;
    color: #000000;
    font-weight:bold;
  }
.footer {
  margin-top: 40px;
  width: 100%;
  font-size: 12px;
  color: #cccccc;
  box-shadow: none;
  span {
    display: inline-block;
    text-align: center;
    width: 10px;
  }
}
</style>
